<template>
  <div class="ele-body ele-body-card" v-loading="fullscreenLoading">
    <el-row :gutter="15" v-if="name">
      <el-col :span="24" style="text-align: left;font-size:24px">{{name}}</el-col>
    </el-row>
    <!-- 顶部筛选 -->
    <el-row :gutter="15">
      <el-form ref="schoolForm" :inline="true" :model="schoolForm" label-width="80px">
        <el-form-item label="统计年度">
          <el-select
            filterable
            clearable
            v-model="schoolForm.niandu"
            @change="getAllData"
            size="small"
            placeholder="-学年统计-"
            class="ele-block">
            <el-option v-for="item in xuenianList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="统计日期">
          <el-col :span="11">
            <el-date-picker
              v-model="schoolForm.start_end"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chooseDate"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 顶部统计卡片 -->
    <el-row :gutter="15">
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/renshu.png" alt="" class="el-icon-dash">
            <div>{{ analysisData.class_name }}</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;height: calc(164px);position: relative">
            <ele-chart
              ref="visitHourChart"
              style="height: calc(160px);"
              :option="shengaopieTopOne"/>
            <div style="position: absolute;display: flex;left: 50%;top: 30%;color: #333;width: 54%;">
              <div style="display: flex;flex-direction: column;justify-content:flex-end;width: 50%;">
                <div style="margin-bottom: 10px;height: 20px;">班运动人数</div>
                <div>总人数</div>
              </div>
              <div style="display: flex;flex-direction: column;justify-content:flex-end;width: 50%;">
                <div style="margin-bottom: 10px;height: 20px;">{{ analysisData.yundong_num }}</div>
                <div>{{ analysisData.zong_num }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/renshu.png" alt="" class="el-icon-dash">
            <div >各运动占比</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;height: calc(164px);">
            <ele-chart
              ref="visitHourChart"
              style="height: calc(160px);"
              :option="shengaopieTop"/>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/renshu.png" alt="" class="el-icon-dash">
            <div >运动总时长</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;height: calc(164px);">
            <ele-chart
              ref="visitHourChart"
              style="height: calc(160px);"
              :option="shengaopieThrid"/>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 一行 各项目参与率-->
    <el-row :gutter="15">
      <el-col :lg="12" :md="12">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <ele-chart
            ref="visitHourChart"
            style="height: 323px;"
            :option="xiangmuCYLChartOption"/>
        </el-card>
      </el-col>
      <el-col :lg="12" :md="12">
        <!--        <el-card shadow="never" header="热门搜索">-->
        <!--          <ele-word-cloud-->
        <!--            ref="hotSearchChart"-->
        <!--            :data="hotSearchData"-->
        <!--            style="height: 303px;"/>-->
        <!--        </el-card>-->
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <ele-chart
            ref="visitHourChart"
            style="height: 323px;"
            :option="yundongSCChartOption"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 二行 -->
    <el-row :gutter="15">
      <el-col :lg="12" :md="12">
        <el-card header="参与情况"
                 shadow="never"
                 body-style="padding: 10px 0px 0 0;" style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div class="moddile" style="display: flex;justify-content: center;align-items: center">
            <div class="moddile-item">
              <div style="color: #8E8E8E;">运动总人数</div>
              <div style="font-size: 20px;">{{ canyun_ting.zong_num }}</div>
            </div>
            <div class="moddile-item">
              <div style="color: #8E8E8E;">运动总时长</div>
              <div style="font-size: 20px;">{{ canyun_ting.zong_time }}</div>
            </div>
            <div class="moddile-item">
              <div style="color: #8E8E8E;">人均运动时长</div>
              <div style="font-size: 20px;">{{ canyun_ting.zong_avg }}</div>
            </div>
          </div>
          <ele-chart
            ref="visitHourChart"
            style="height: 216px;"
            :option="xueYuanChartOption"/>
        </el-card>
      </el-col>
      <el-col :lg="12" :md="12">
        <!--        <el-card shadow="never" header="热门搜索">-->
        <!--          <ele-word-cloud-->
        <!--            ref="hotSearchChart"-->
        <!--            :data="hotSearchData"-->
        <!--            style="height: 303px;"/>-->
        <!--        </el-card>-->
        <el-card header="班级运动时长排名"
          shadow="never"
          body-style="padding: 10px 0px 0 0;" style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-button-group style="height: 40px;">
              <el-button :type="iszongshichang=='1'?'primary':''" size="small" @click="changeyundong('1')">运动总时长
              </el-button>
              <el-button :type="iszongshichang=='2'?'primary':''" size="small" @click="changeyundong('2')">跑步总里程
              </el-button>
            </el-button-group>
          </div>
          <div  style="height: calc(272px);">
            <el-table
              height="272"
              :data="iszongshichang=='1'?class_rank1:class_rank2"
              highlight-current-row
              style="width: 100%">
              <el-table-column
                property="rank"
                label="排名"
                width="50">
              </el-table-column>
              <el-table-column
                property="no"
                label="学籍号"
              >
              </el-table-column>
              <el-table-column
                property="name"
                label="姓名"
              >
              </el-table-column>
              <el-table-column
                property="num"
                label="运动时长(h)">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="lookstudent(scope.row)" type="text" size="small">学生画像</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 三行 饼图 -->
    <el-row :gutter="15">
      <el-col :lg="12" :md="12">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-button-group style="height: 40px;">
              <el-button :type="ischoose=='0'?'primary':''" size="small" @click="selectren('0')">全部</el-button>
              <el-button :type="ischoose=='1'?'primary':''" size="small" @click="selectren('1')">男生</el-button>
              <el-button :type="ischoose=='2'?'primary':''" size="small" @click="selectren('2')">女生</el-button>
            </el-button-group>
          </div>
          <ele-chart
            ref="visitshengaopieChart"
            style="height: calc(238px);"
            :option="shengaopie"/>
        </el-card>
      </el-col>
      <el-col :lg="12" :md="12">
        <!--        <el-card shadow="never" header="热门搜索">-->
        <!--          <ele-word-cloud-->
        <!--            ref="hotSearchChart"-->
        <!--            :data="hotSearchData"-->
        <!--            style="height: 303px;"/>-->
        <!--        </el-card>-->
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-button-group style="height: 40px;">
              <el-button :type="ischoose2=='0'?'primary':''" size="small" @click="selectren2('0')">全部</el-button>
              <el-button :type="ischoose2=='1'?'primary':''" size="small" @click="selectren2('1')">男生</el-button>
              <el-button :type="ischoose2=='2'?'primary':''" size="small" @click="selectren2('2')">女生</el-button>
            </el-button-group>
          </div>
          <ele-chart
            ref="visitshengaopieTwoChart"
            style="height: calc(238px);"
            :option="shengaopieTwo"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 四行 -->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <ele-chart
            ref="visitHourChart"
            style="height: 323px;"
            :option="manClassScoreData"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 五行 -->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <ele-chart
            ref="visitHourChart"
            style="height: 323px;"
            :option="womanClassScoreData"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import EleChart from 'ele-admin/packages/ele-chart';

export default {
  name: 'DashboardAnalysis',
  components: {EleChart,},
  data() {
    return {
      xuenianList:[],
      woman_rate:'',
      man_rate:'',
      zong_time:'',
      yundong_rate:'',
      ischoose:'0',
      ischoose2:'0',
      iszongshichang: true,
      classId       : '',
      name          : '',
      analysisData  : {},
      canyulvX      : [],
      canyulvData   : [],
      //运动时长
      yundongshichangData: [],
      //男生女生平均
      man_levelProjectData  : [],
      man_levelProjectX     : [],
      woman_levelProjectData: [],
      woman_levelProjectX   : [],
      //参与情况
      canyun_ting    : {},
      canyun_tingData: [],
      class_rank1    : [],
      class_rank2    : [],
      // 支付笔数
      payNumData: [],
      // 销售量搜索参数
      saleSearch: {
        type    : 'saleroom',
        dateType: 0,
        datetime: ''
      },
      // 销售量数据
      saleroomData: [],
      // 销售量排名数据
      saleroomRankData: [],
      // 学院
      xueYuanData: [],
      // 词云数据
      hotSearchData : [],
      schoolForm    : {
        niandu   : '',
        nianji   : '',
        begin    : '',
        end      : '',
        start_end: []
      },
      formYuanxi    : {
        yuanxi: '',
        date1 : ''
      },
      feihuoData    : [],
      feihuoX       : [],
      weight_bmiX   : [],
      weight_bmiData: [],

      feihuoManData      : [],
      feihuoWomanData    : [],
      weight_bmiManData  : [],
      weight_bmiWomanData: [],
      fullscreenLoading:false
    };
  },
  created() {
    this.classId = this.$route.query.id
    this.name    = this.$route.query.name
    this.getXueList();
    this.getAllData();
  },
  computed: {
	  // 学院
	  xueYuanChartOption() {
		  /*if (!this.visitHourData.length) {
			return {};
		  }*/
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title: {
				  text: '学院'
			  },
			  grid:{
				  top:'15%',
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  tooltip: {
				  trigger: 'axis',
				  formatter(params) {
					  let val0 = params[0]["value"];
					  let val1 = params[1]["value"];
					  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
					  let data0 = `${circle}#00BFFF"></span> ${
						  params[0]["seriesName"]
					  }: ${val0}%`;
					  let data1 = `${circle}#00EE76"></span> ${
						  params[1]["seriesName"]
					  }: ${val1}%`;
					  return `${params[0].axisValueLabel}<br/>${data0}<br/>${data1}`;
				  }
			  },
			  legend: {
				  data: ['参与时长', '参与率'],
				  
			  },
			  xAxis: [
				  {
					  type: 'category',
					  boundaryGap: false,
					  data: this.xueYuanData.map(d => d.time),
					  axisLabel:{
						  fontSize:12,
						  interval: 0,
						  rotate: 30
					  },
				  }
			  ],
			  yAxis: [
				  {
					  type: 'value'
				  }
			  ],
			  series: [
				  {
					  name: '参与时长',
					  type: 'line',
					  smooth: true,
					  
					  areaStyle: {
						  opacity: 0.5
					  },
					  data: this.xueYuanData.map(d => d.views),
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00BFFF",
						  formatter: '{c}%'
					  }
				  },
				  {
					  name: '参与率',
					  type: 'line',
					  smooth: true,
					  areaStyle: {
						  opacity: 0.5
					  },
					  data: this.xueYuanData.map(d => d.visits),
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00EE76",
						  formatter: '{c}%'
					  }
				  }
			  ]
		  }
	  },
    shengaopieTopOne() {
      return {
        grid:{
          x:0,
            y:0,
            x2:0,
            y2:0
        },
        legend: {
          show:false,
          type: 'scroll',
            orient: 'vertical',
            x: 'right',               // 水平安放位置，默认为全图居中，可选为：
            y: 'top',
            borderColor: '#ccc',       // 图例边框颜色
            borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
            padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
            // 接受数组分别设定上右下左边距，同css
            itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
            // 横向布局时为水平间隔，纵向布局时为纵向间隔
            itemWidth: 20,             // 图例图形宽度
            itemHeight: 14,            // 图例图形高度
            textStyle: {
            color: '#333'    // 图例文字颜色
          },
          data: [
            '运动占比',
            '未运动',
          ]
        },
        label:{
          show:false
        },
        series: [
          {
            name: '',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '50%'],
            center: ['25%', '50%'],
            label: {
	            alignTo: 'labelLine',
              position: 'center',
              fontSize: 14,
              color: '#333',
              formatter: this.yundong_rate,
	            minMargin: 1,
	            edgeDistance: 4,
	            lineHeight: 8,
	            rich: {
		            name: {
			            fontSize: 14,
			            marginBottom:12
		            },
	            }
            },
	          labelLine: {
		          length:10,
		          length2: 0,
		          maxSurfaceAngle: 80
	          },
            data: [{ value: 1548, name: `全部` }],
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,
            itemStyle: {
              opacity: 0.7,
              margin:10,
              color:'#fff'
            },
          },
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['25%', '50%'],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              {
                value:this.analysisData.yundong_num, name: '运动占比',
                itemStyle: {
                  opacity: 0.7,
                  margin:10,
                  color:'#00F0FF',
                  borderRadius: 15
                },},
              { value: this.analysisData.zong_num-this.analysisData.yundong_num, name: '未运动' ,
                itemStyle: {
                  opacity: 0.7,
                  margin:10,
                  color:'#d7d5d5',
                  borderRadius: 15
                },}
            ],
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
    shengaopieTop(){
      return {
        grid:{
          top:'-6%'
        },
        legend: {
          orient: 'vertical',
          x: '50%',               // 水平安放位置，默认为全图居中，可选为：
          y: '16%',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth: 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle: {
            color: '#333'    // 图例文字颜色
          },
          data: [
            '男',
            '女'
          ]
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['20%', '50%'],
	          label: {
		          alignTo: 'labelLine',
		          formatter: `{name|{b}}\n\n{c}%`,
		          minMargin: 1,
		          edgeDistance: 4,
		          lineHeight: 8,
		          rich: {
			          name: {
				          fontSize: 14,
				          marginBottom:12
			          },
		          }
	          },
	          labelLine: {
		          length:10,
		          length2: 0,
		          maxSurfaceAngle: 80
	          },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              {
                value: this.man_rate, name: '男',
                itemStyle: {
                  opacity: 0.7,
                  margin:10,
                  color:'#00F0FF',
                  borderRadius: 15
                },},
              { value: this.woman_rate, name: '女' ,
                itemStyle: {
                  opacity: 0.7,
                  margin:10,
                  color:'#7d10f1',
                  borderRadius: 15
                },}
            ],
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
    shengaopieThrid(){
      return {
        series: [
          {
            type: 'gauge',
            radius: '80%', //修改表盘大小
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: this.zong_time+20,
            itemStyle: {
              color: '#FFAB91'
            },
            progress: {
              show: true,
              width: 12
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 12
              }
            },
            axisTick: {
              distance: -20,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            splitLine: {
              distance: -24,
              length: 10,
              lineStyle: {
                width: 3,
                color: '#999'
              }
            },
            axisLabel: {
              distance: -20,
              color: '#999',
              fontSize: 12
            },
            anchor: {
              show: false
            },
            title: {
              offsetCenter: [0, '24%'],
              fontSize: 12
            },
            detail: {
              valueAnimation: true,
              width: '100%',
              lineHeight: 20,
              borderRadius: 8,
              offsetCenter: [0, '-2%'],
              fontSize: 16,
              fontWeight: 'bolder',
              formatter: '{value}',
              color: 'inherit',


            },

            data: [
              {
                value: this.zong_time,
                name:'总时长'
              }
            ]
          },
          {
            type: 'gauge',
            radius: '80%', //修改表盘大小
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 60,
            itemStyle: {
              color: '#FD7347'
            },
            progress: {
              show: true,
              width: 8
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            },
            data: [
              {
                value: this.zong_time
              }
            ]
          }
        ]
      }
    },
	  //   项目参与率
	  xiangmuCYLChartOption(){
		  return {
			  title: {
				  text: '项目参与率'
			  },
			  color:["#00BFFF"],
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color = ['#00BFFF'];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val}%`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  itemStyle: {
				  opacity: 0.7,
				  borderRadius:10,
				  margin:10,
			  },
			  legend: {},
			  grid: {
				  top:'15%',
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  xAxis: {
				  type: 'value',
				  boundaryGap: [0, 0.01]
			  },
			  yAxis: {
				  type: 'category',
				  data:this.canyulvX
			  },series: [
				  {
					  name: this.canyulvDepartments?this.canyulvDepartments:'全部',
					  type: 'bar',
					  data: this.canyulvData,
					  barWidth:10,
					  label: {
						  show: true,
						  position: 'right',
						  color:"#00BFFF",
						  formatter: '{c}%'
					  }
				  }
			  ]
		  };
	  },
	  //运动时长
	  yundongSCChartOption() {
		  /*if (!this.visitHourData.length) {
			return {};
		  }*/
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title: {
				  text: '运动时长'
			  },
			  grid:{
				  top:'18%',
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color = ['#00BFFF',"#00EE76"];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val}h`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  legend: {
				  data: ['男生', '女生']
			  },
			  xAxis: [
				  {
					  type: 'category',
					  boundaryGap: false,
					  data: this.yundongshichangData.map(d => d.time),
					  axisLabel:{
						  fontSize:12,
						  interval: 0,
						  rotate: 30
					  },
				  }
			  ],
			  yAxis: [
				  {
					  type: 'value'
				  }
			  ],
			  series: [
				  {
					  name: '男生',
					  type: 'line',
					  smooth: false,
					  areaStyle: {
						  opacity: 0.5
					  },
					  data: this.yundongshichangData.map(d => d.views),
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00BFFF",
						  formatter: '{c}h'
					  }
				  },
				  {
					  name: '女生',
					  type: 'line',
					  smooth: false,
					  areaStyle: {
						  opacity: 0.5
					  },
					  data: this.yundongshichangData.map(d => d.visits),
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00EE76",
						  formatter: '{c}h'
					  }
				  }
			  ]
		  }
	  },
    shengaopie(){
      return {
        title : {
          text: '肺活量'
        },
        grid  : {
          x : 0,
          y : 0,
          x2: 0,
          y2: 0
        },
        legend: {
          type       : 'scroll',
          orient     : 'vertical',
          x          : 'right',               // 水平安放位置，默认为全图居中，可选为：
          y          : '20%',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding    : 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth : 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle : {
            color: '#333'    // 图例文字颜色
          },
          data      : this.feihuoX
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['35%', '50%'],
	          label: {
		          alignTo: 'labelLine',
		          formatter: `{name|{b}}\n\n{c}%`,
		          minMargin: 1,
		          edgeDistance: 4,
		          lineHeight: 8,
		          rich: {
			          name: {
				          fontSize: 14,
				          marginBottom:12
			          },
		          }
	          },
	          labelLine: {
		          length:10,
		          length2: 0,
		          maxSurfaceAngle: 80
	          },
            emphasis: {
              label: {
                show: true
              }
            },
            data: this.ischoose=='0'?this.feihuoData:(this.ischoose=='1'?this.feihuoManData:this.feihuoWomanData),
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
    shengaopieTwo(){
      return {
        title : {
          text: '身高体重BMI'
        },
        grid  : {
          x : 0,
          y : 0,
          x2: 0,
          y2: 0
        },
        legend: {
          type       : 'scroll',
          orient     : 'vertical',
          x          : 'right',               // 水平安放位置，默认为全图居中，可选为：
          y          : '20%',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding    : 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth : 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle : {
            color: '#333'    // 图例文字颜色
          },
          data      : this.weight_bmiX
        },
        series: {
          name     : '',
          type     : 'pie',
          radius   : ['50%', '70%'],
          center   : ['35%', '50%'],
	        label: {
		        alignTo: 'labelLine',
		        formatter: `{name|{b}}\n\n{c}%`,
		        minMargin: 1,
		        edgeDistance: 4,
		        lineHeight: 8,
		        rich: {
			        name: {
				        fontSize: 14,
				        marginBottom:12
			        },
		        }
	        },
	        labelLine: {
		        length:10,
		        length2: 0,
		        maxSurfaceAngle: 80
	        },
          emphasis : {
            label: {
              show: true
            }
          },
          data     : this.ischoose2=='0'?this.weight_bmiData:(this.ischoose2=='1'?this.weight_bmiManData:this.weight_bmiWomanData),
          // 鼠标移上去的item不会凸出了
          hoverAnimation: false,
        }
      }
    },
	  //  男生各项目平均分与等级
	  manClassScoreData(){
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title: {
				  text: '男生各项目平均分与等级'
			  },
			  color:['#00BFFF',"#00EE76","#f1be17"],
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color = ['#00BFFF',"#00EE76","#f1be17"];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val}${index=='0'?'分':'%'}`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  grid:{
				  top:'22%',
				  x2:50,
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  legend: {
				  data: ['分数', '合格率', '优良率']
			  },
			  xAxis: [
				  {
					  type: 'category',
					  data: this.man_levelProjectX,
					  axisPointer: {
						  type: 'shadow'
					  },
					  axisLabel:{
						  fontSize:12,
						  interval: 0,
						  rotate: 30
					  },
				  }
			  ],
			  yAxis: [
				  {
					  type: 'value',
					  name: '分数',
					  min: 0,
					  axisLabel: {
						  formatter: '{value} 分'
					  }
				  },
				  {
					  type: 'value',
					  name: '比率',
					  min: 0,
					  max: 100,
					  axisLabel: {
						  formatter: '{value} %'
					  }
				  }
			  ],
			  series: [
				  {
					  name: '分数',
					  type: 'bar',
					  
					  barWidth:20,
					  data: this.man_levelProjectData[0],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00BFFF",
						  formatter: '{c}分'
					  }
				  },
				  {
					  name: '合格率',
					  type: 'line',
					  barWidth:20,
					  
					  data: this.man_levelProjectData[1],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00EE76",
						  formatter: '{c}%'
					  }
				  },
				  {
					  name: '优良率',
					  type: 'line',
					  yAxisIndex: 1,
					  
					  data:this.man_levelProjectData[2],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#FFC125",
						  formatter: '{c}%'
					  }
				  }
			  ]
		  };
	  },
	  //   女生各项目平均分与等级
	  womanClassScoreData(){
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title: {
				  text: '女生各项目平均分与等级'
			  },
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color = ['#00BFFF',"#00EE76","#f1be17"];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val}${index=='0'?'分':'%'}`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  grid:{
				  top:'22%',
				  x2:50,
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  color:["#00BFFF","#00EE76","#FFC125"],
			  legend: {
				  data: ['分数', '合格率', '优良率']
			  },
			  xAxis: [
				  {
					  type: 'category',
					  data: this.woman_levelProjectX,
					  axisPointer: {
						  type: 'shadow'
					  },
					  axisLabel:{
						  fontSize:12,
						  interval: 0,
						  rotate: 30
					  },
				  }
			  ],
			  yAxis: [
				  {
					  type: 'value',
					  name: '分数',
					  min: 0,
					  axisLabel: {
						  formatter: '{value} 分'
					  }
				  },
				  {
					  type: 'value',
					  name: '比率',
					  min: 0,
					  max: 100,
					  axisLabel: {
						  formatter: '{value} %'
					  }
				  }
			  ],
			  series: [
				  {
					  name: '分数',
					  type: 'bar',
					  
					  barWidth:20,
					  data: this.woman_levelProjectData[0],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00BFFF",
						  formatter: '{c}分'
					  }
				  },
				  {
					  name: '合格率',
					  type: 'line',
					  barWidth:20,
					  
					  data: this.woman_levelProjectData[1],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00EE76",
						  formatter: '{c}%'
					  }
				  },
				  {
					  name: '优良率',
					  type: 'line',
					  yAxisIndex: 1,
					  data:this.woman_levelProjectData[2],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#FFC125",
						  formatter: '{c}%'
					  }
				  }
			  ]
		  };
	  }

  },
  mounted() {
  },
  methods: {
    /**
     * 选择日期
     */
    chooseDate(e){
      console.log("====1",e)
      this.schoolForm.begin = e[0];
      this.schoolForm.end = e[1];
      this.getAllData()
    },
    lookstudent(row) {
      console.log(row)
	    this.$router.push({path: '/evaluate/studentAnalysis', query: {name: row.name,id:row.id}});
    },
    selectren(type){
      this.ischoose = type;
      this.getAllData();
    },
    selectren2(type){
      this.ischoose2 = type;
      this.getAllData();
    },
    getXueList() {
      this.$http.get('/annual/getXueList').then(res => {
        if (res.data.code === 0) {
          this.xuenianList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 学院 */
    getxueYuanData() {
      this.yundongshichangData    = this.analysisData.yundongshichang;
      this.yuanxi_avgsData        = this.analysisData.yuanxi_avgs;
      this.project_levelData      = this.analysisData.project_level;
      this.canyun_ting            = this.analysisData.canyun_ting;
      this.canyun_tingData        = this.analysisData.canyun_ting.canyu_data;
      this.man_levelProjectData   = this.analysisData.man_level.data;
      this.woman_levelProjectData = this.analysisData.woman_level.data;
      this.man_levelProjectX      = this.analysisData.man_level.project;
      this.woman_levelProjectX    = this.analysisData.woman_level.project;
      this.class_rank1            = this.analysisData.class_rank1;
      this.class_rank2            = this.analysisData.class_rank2;
      this.zong_time = this.analysisData.zong_time;
      this.woman_rate = this.analysisData.woman_rate;
      this.man_rate = this.analysisData.man_rate;
      this.yundong_rate = this.analysisData.yundong_rate;
      let arr  = [];
      let arrx = [];
      this.analysisData.feihuo.map((item) => {
        let obj = {
          "value"  : item.value,
          "name"   : item.name,
          itemStyle: {
            opacity     : 0.7,
            margin      : 10,
            borderRadius: 15
          }
        }
        arr.push(obj)
        arrx.push(item.name)
      });
      this.feihuoData = arr;
      this.feihuoX    = arrx
      let arr2        = [];
      let arrx2       = [];
      this.analysisData.weight_bmi.map((item) => {
        let obj = {
          "value"  : item.value,
          "name"   : item.name,
          itemStyle: {
            opacity     : 0.7,
            margin      : 10,
            borderRadius: 15
          }
        }
        arr2.push(obj)
        arrx2.push(item.name)
      });
      let arr3 = []
      this.analysisData.weight_bmi_man.map((item) => {
        let obj = {
          "value"  : item.value,
          "name"   : item.name,
          itemStyle: {
            opacity     : 0.7,
            margin      : 10,
            borderRadius: 15
          }
        }
        arr3.push(obj)
      });
      let arr4 =[];
      this.analysisData.weight_bmi_woman.map((item) => {
        let obj = {
          "value"  : item.value,
          "name"   : item.name,
          itemStyle: {
            opacity     : 0.7,
            margin      : 10,
            borderRadius: 15
          }
        }
        arr4.push(obj)
      });
      let arr5 = [];
      this.analysisData.feihuo_man.map((item) => {
        let obj = {
          "value"  : item.value,
          "name"   : item.name,
          itemStyle: {
            opacity     : 0.7,
            margin      : 10,
            borderRadius: 15
          }
        }
        arr5.push(obj)
      });
      let arr6 = [];
      this.analysisData.feihuo_woman.map((item) => {
        let obj = {
          "value"  : item.value,
          "name"   : item.name,
          itemStyle: {
            opacity     : 0.7,
            margin      : 10,
            borderRadius: 15
          }
        }
        arr6.push(obj)
      });
      this.weight_bmiData = arr2;
      this.weight_bmiX    = arrx2;
      this.weight_bmiManData  =arr3;
      this.weight_bmiWomanData = arr4;
      this.feihuoManData = arr5;
      this.feihuoWomanData = arr6;
      console.log("====,", this.weight_bmiData, this.weight_bmiX)
    },
    /**
     * 获取项目参与率
     * **/
    getxiangmucanyuLv() {
      this.canyulvX = this.analysisData.canyulv.data;

      this.canyulvData = this.analysisData.canyulv.yzhou;
      console.log("===yzhou", this.canyulvData)
    },
    changeyundong(type) {
      this.iszongshichang = type
    },
    /* 获取基本的chart 数据 */
    getAllData() {
      let params = {
        ...this.schoolForm,
        classId: this.classId,

      }
      this.fullscreenLoading = true;
      this.$http.post('/data/banji', params).then(res => {
        if (res.data.code === 0) {
          this.analysisData = res.data.data;
          //   获取学院数据
          this.getxueYuanData();
          // // 获取合格率数据
          // this.gethegelvData();
          //   获取项目参与率数据
          this.getxiangmucanyuLv();
        } else {
          this.$message.error(res.data.msg);
        }
        this.fullscreenLoading = false;
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  },
  activated() {
    ['visitChart', 'visitshengaopieChart', 'visitHourChart', 'visitshengaopieTwoChart'].forEach((name) => {
      this.$refs[name].resize();
    });
  }
}
</script>

<style scoped lang="less">
/* 统计卡片4个 */
/deep/.el-card>.el-card__header{
  font-weight: bold;
  border-bottom: none;
  font-size:18px;
  padding-left: 4px!important;

}
.analysis-chart-card-head{
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 8px;
  .el-icon-dash{
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
}
/* 统计卡片 */
.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.analysis-chart-card-text {
  padding-top: 12px;
}

/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 0 20px;
}

.demo-monitor-tool ::v-deep .el-tabs__nav-wrap:after {
  display: none;
}

.demo-monitor-tool ::v-deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
}

.demo-monitor-tool .el-date-editor {
  width: 256px;
  margin-left: 10px;
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

/* 排名item */
.demo-monitor-rank-item {
  padding: 0 20px;
  line-height: 20px;
  margin-top: 18px;
}
.moddile-item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-right: 20px;
  div{
    &:first-child{
      margin-bottom: 10px;
    }
  }
}
</style>
